<template>
  <div>
    <Card shadow>
      <Form
        ref="searchForm"
        :model="pageParams"
        inline
        :label-width="80">
        <FormItem label="请求路径" prop="path">
          <Input type="text" v-model="pageParams.path" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="IP" prop="ip">
          <Input type="text" v-model="pageParams.ip" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="服务名" prop="serviceId">
          <Input type="text" v-model="pageParams.serviceId" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch()">查询</Button>&nbsp;
          <Button @click="handleResetForm('searchForm')">重置</Button>
        </FormItem>
      </Form>

      <s-table :method="post" :url="$apis.gateway.getAccessLogs" :columns="columns" :params="pageParams" ref="table">
        <template slot="httpStatus" slot-scope="{ row }">
          <Tag v-if="row.httpStatus==='200'" color="success">{{ row.httpStatus }}</Tag>
          <Tag v-else="" color="error">{{ row.httpStatus }}</Tag>
        </template>
        <template slot="detail" slot-scope="{ row }">
          <a @click="openDrawer(row)">详情</a>
        </template>
      </s-table>
    </Card>
    <Drawer width="30" v-model="drawer">
      <div slot="header">
        <Badge v-if="currentRow.httpStatus==='200'" status="success"/>
        <Badge v-else="" status="error"/>
        {{ currentRow.httpStatus }}
        {{ currentRow.path }} - {{ currentRow.serviceId }}

      </div>
      <div>
        <h3>请求头</h3>
        <pre>
             {{ currentRow.headers ? JSON.stringify(JSON.parse(currentRow.headers), null, 4) : '' }}
        </pre>
        <h3>请求参数</h3>
        <pre>
              {{ currentRow.params ? JSON.stringify(JSON.parse(currentRow.params), null, 4) : '' }}
        </pre>
        <h3>错误信息</h3>
        <pre>
          {{ currentRow.error }}
        </pre>
        <h3>认证信息</h3>
        <pre>
              {{ currentRow.authentication ? JSON.stringify(JSON.parse(currentRow.authentication), null, 4) : '' }}
        </pre>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { readUserAgent } from '@/utils/util'

export default {
  name: 'GatewayAccessLog',
  data () {
    return {
      drawer: false,
      currentRow: {},
      pageParams: {
        path: '',
        ip: '',
        serviceId: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '请求地址',
          key: 'path',
          width: 220
        },
        {
          title: '请求方式',
          key: 'method',
          width: 100
        },
        {
          title: 'IP',
          key: 'ip',
          width: 150
        },
        {
          title: '区域',
          key: 'region',
          width: 200
        },
        {
          title: '终端',
          width: 100,
          render: (h, params) => {
            return h('div', readUserAgent(params.row.userAgent).terminal)
          }
        },
        {
          title: '浏览器',
          width: 100,
          render: (h, params) => {
            return h('div', readUserAgent(params.row.userAgent).browser)
          }
        },
        {
          title: '服务名',
          key: 'serviceId',
          width: 200
        },
        {
          title: '响应状态',
          key: 'httpStatus',
          slot: 'httpStatus',
          width: 100
        },
        {
          title: '耗时',
          key: 'useTime',
          render: (h, params) => {
            return h('div', (params.row.useTime ? params.row.useTime : 0) + ' ms')
          },
          width: 100
        },
        {
          title: '请求时间',
          key: 'requestTime',
          width: 200
        },
        {
          title: '详情',
          slot: 'detail',
          fixed: 'right',
          width: 100
        }
      ],
      data: []
    }
  },
  methods: {
    openDrawer (data) {
      this.currentRow = data
      this.drawer = true
    },
    handleSearch () {
      this.$refs.table.search()
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
